/**
 * 学习目标： React 类组件状态

 */

import React from 'react'
import ReactDOM from 'react-dom'
import MyFooter from './components/MyFooter'

class MyHeader extends React.Component {
  // state 结构 相当于 Vue 的 data(){ } 结构，用于定义响应式数据
  state = {
    msg: 'Hello',
  }

  render() {
    return (
      <header>
        <h1>页面头部组件</h1>
        <h2>{this.state.msg}</h2>
      </header>
    )
  }
}

const aa = new MyHeader()
console.log(aa)

const App = () => (
  <>
    <MyHeader />
    <div>内容主体</div>
    <MyFooter />
  </>
)

ReactDOM.render(<App />, document.getElementById('root'))
